<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
<meta http-equiv="pragma" content="no-cache"/>

<title></title>
<link rel="stylesheet" type="text/css" href="../css/common/admin_templ_style.css"/>
<link rel="stylesheet" type="text/css" href="../api/css/cupertino/jquery-ui-1.10.1.custom.min.css"/>
<link rel="stylesheet" type="text/css" href="../api/css/boi.css"/>
<link rel="stylesheet" type="text/css" href="../api/css/jquery.colorpicker.css"/>
<script src="../api/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../api/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../api/js/jquery.flot.min.js"></script>
<script type="text/javascript" src="../api/js/jquery.colorpicker.js"></script>
<script type="text/javascript" src="../api/js/jquery.ui.colorpicker-rgbslider.js"></script>
<script type="text/javascript" src="../api/js/jquery.ui.colorpicker-nl.js"></script>
<script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

<script type="text/javascript">
var BOI = parent.BOI; //REQUIRED
var BOIData = BOI.BOIData; //REQUIRED

var app_id, report_id, report_type, data_provider;


var report = {};
var kpi = {X_AXIS:'', Y_AXES:{}, SERIES_AXIS:'', CHART_TYPE:'Line', PLOT_TYPE:'', MAXIMUM:'50'};
var node_id;
var headerColumnsOptions = '';

$(document).ready(function () {

    app_id = parent.app_id;
    if (parent.current_node) {
        report_id = parent.current_node.data.key;
        report_type = parent.current_node.data.type;
        data_provider = parent.current_node.data.data_provider;
    }
    $('input[type="submit"],input[type="button"]').button();
    $("form").submit(function () {
        request();
        return false;
    });
    $("#reset").live('click', function () {
        window.location.href = window.location.href;
    });


    // Abdulmajeed changes Start...
    $('#FIRST_RANGE_COLOR').colorpicker(
            {
                parts:'full',
                alpha:true,
                showOn:'both',
                buttonColorize:true,
                showNoneButton:true
            });

    $('#SECOND_RANGE_COLOR').colorpicker(
            {
                parts:'full',
                alpha:true,
                showOn:'both',
                buttonColorize:true,
                showNoneButton:true
            });

    $('#THIRD_RANGE_COLOR').colorpicker(
            {
                parts:'full',
                alpha:true,
                showOn:'both',
                buttonColorize:true,
                showNoneButton:true
            });

    // Abdulmajeed changes end...

    $("#preview").live('click', function () {
        kpi.X_AXIS = $('#X_AXIS').val();
        kpi.SERIES_AXIS = $('#SERIES_AXIS').val();
        kpi.PLOT_TYPE = $('#PLOT_TYPE').val();
        kpi.CHART_TYPE = $('#CHART_TYPE').val();
        kpi.MAXIMUM = $('#MAXIMUM').val();
        kpi.Y_AXES = {};

        var y_axes = $('#Y_AXES').val();
        for (var i in y_axes) {
            kpi.Y_AXES[y_axes[i]] = y_axes[i];
        }

        //Abdulmajeed Edit Start ... extra configurations for KPI...
        kpi.LABEL_POSITION = $('#LABEL_POSITION').val();
        kpi.X_AXIS_LABEL = $('#X_AXIS_LABEL').val();
        kpi.Y_AXIS_LABEL = $('#Y_AXIS_LABEL').val();
        kpi.X_DECIMAL_POSITION = $('#X_DECIMAL_POSITION').val();
        kpi.Y_DECIMAL_POSITION = $('#Y_DECIMAL_POSITION').val();

        if ($('#LABEL_POSITION').val() == true) {
            kpi.COLOR_RANGES = {};
            kpi.COLOR_RANGES[0] = {'FROM_VALUE':$('#FIRST_RANGE_FROM').val(), 'TO_VALUE':$('#FIRST_RANGE_TO').val(), 'COLOR_CODE':$('#FIRST_RANGE_COLOR').val()};
            kpi.COLOR_RANGES[1] = {'FROM_VALUE':$('#SECOND_RANGE_FROM').val(), 'TO_VALUE':$('#SECOND_RANGE_TO').val(), 'COLOR_CODE':$('#SECOND_RANGE_COLOR').val()};
            kpi.COLOR_RANGES[2] = {'FROM_VALUE':$('#THIRD_RANGE_FROM').val(), 'TO_VALUE':$('#THIRD_RANGE_TO').val(), 'COLOR_CODE':$('#THIRD_RANGE_COLOR').val()};
        }

        kpi.SCALE_TYPE = $('#SCALE_TYPE').val();
        kpi.SCALE_MODE = $('#SCALE_MODE').val();
        //Abdulmajeed Edit End ... extra configurations for KPI...


        //get details from query
        //get data
        var queryArguments = new Object();
        queryArguments['display_key'] = 'X';

// Ansaj : 3/3/2014 Change from data.key to data.data_provider  (parent.current_node.data.key)
        BOI.executeReport(undefined, parent.current_node.data.data_provider, function (kpi_data) {

            $('[name="chart_preview"]').load(function () {
                if (window.frames['chart_preview'].document.readyState == 'complete') {
                    window.frames['chart_preview'].properties.data = kpi_data;
                    window.frames['chart_preview'].properties.kpi = kpi;
                    window.frames['chart_preview'].properties.current_report = parent.current_node.data;
                    window.frames['chart_preview'].initialize();
                }
            });
            $('[name="chart_preview"]').attr('src', '../comp/selection/bi_apps_comp_kpi_line.html');
        }, queryArguments);
    });

    if (parent.current_node) {
        node_id = parent.current_node.key;
    }
    load();

    //added by abdulmajeed, to refresh drill down page after save.
    $('[name="Y_AXES"]').change(function () {
        window.frames['drill_details'].refresh();
    });
    //end abdulmajeed edit.
});

function request() //genereates request XML
{
    var record, class_name, method_name, req, param, done = 0;
    method_name = 'UPDATE';

    record = new BOIData.Record();
    class_name = "ZCL_MYBW_REP_CATALOG";

    kpi.X_AXIS = $('#X_AXIS').val();
    kpi.SERIES_AXIS = $('#SERIES_AXIS').val();
    kpi.PLOT_TYPE = $('#PLOT_TYPE').val();
    kpi.CHART_TYPE = $('#CHART_TYPE').val();
    kpi.MAXIMUM = $('#MAXIMUM').val();
    kpi.Y_AXES = {};

    //added by Abdulmajeed
    window.frames['drill_details'].save();
    //end edit by Abdulmajeed.

    var y_axes = $('#Y_AXES').val();
    for (var i in y_axes) {
        kpi.Y_AXES[y_axes[i]] = y_axes[i];
    }

    var definition = "<REP_DEFINITION>";
    definition += "<X_AXIS>" + kpi.X_AXIS + "</X_AXIS>";
    var yaxes = "";
    for (var i in kpi.Y_AXES)
        yaxes += "<Y_AXIS>" + kpi.Y_AXES[i] + "</Y_AXIS>";
    definition += "<Y_AXES>" + yaxes + "</Y_AXES>";
    definition += "<SERIES_AXIS>" + kpi.SERIES_AXIS + "</SERIES_AXIS>";
    definition += "<PLOT_TYPE>" + kpi.PLOT_TYPE + "</PLOT_TYPE>";
    definition += "<CHART_TYPE>" + kpi.CHART_TYPE + "</CHART_TYPE>";
    definition += "<MAXIMUM>" + kpi.MAXIMUM + "</MAXIMUM>";

    //Abdulmajeed Edit Start ... extra configurations for KPI...
    kpi.LABEL_POSITION = $('#LABEL_POSITION').val();
    kpi.X_AXIS_LABEL = $('#X_AXIS_LABEL').val();
    kpi.Y_AXIS_LABEL = $('#Y_AXIS_LABEL').val();
    kpi.X_DECIMAL_POSITION = $('#X_DECIMAL_POSITION').val();
    kpi.Y_DECIMAL_POSITION = $('#Y_DECIMAL_POSITION').val();
    kpi.SCALE_TYPE = $('#SCALE_TYPE').val();
    kpi.SCALE_MODE = $('#SCALE_MODE').val();

    kpi.COLOR_RANGES = new Array();

    kpi.COLOR_RANGES[0] = new Object();
    kpi.COLOR_RANGES[0].FROM_VALUE = $('#FIRST_RANGE_FROM').val();
    kpi.COLOR_RANGES[0].TO_VALUE = $('#FIRST_RANGE_TO').val();
    kpi.COLOR_RANGES[0].COLOR_CODE = $('#FIRST_RANGE_COLOR').val();

    kpi.COLOR_RANGES[1] = new Object();
    kpi.COLOR_RANGES[1].FROM_VALUE = $('#SECOND_RANGE_FROM').val();
    kpi.COLOR_RANGES[1].TO_VALUE = $('#SECOND_RANGE_TO').val();
    kpi.COLOR_RANGES[1].COLOR_CODE = $('#SECOND_RANGE_COLOR').val();

    kpi.COLOR_RANGES[2] = new Object();
    kpi.COLOR_RANGES[2].FROM_VALUE = $('#THIRD_RANGE_FROM').val();
    kpi.COLOR_RANGES[2].TO_VALUE = $('#THIRD_RANGE_TO').val();
    kpi.COLOR_RANGES[2].COLOR_CODE = $('#THIRD_RANGE_COLOR').val();

    definition += "<LABEL_POSITION>" + kpi.LABEL_POSITION + "</LABEL_POSITION>";
    definition += "<X_AXIS_LABEL>" + kpi.X_AXIS_LABEL + "</X_AXIS_LABEL>";
    definition += "<Y_AXIS_LABEL>" + kpi.Y_AXIS_LABEL + "</Y_AXIS_LABEL>";
    definition += "<X_DECIMAL_POSITION>" + kpi.X_DECIMAL_POSITION + "</X_DECIMAL_POSITION>";
    definition += "<Y_DECIMAL_POSITION>" + kpi.Y_DECIMAL_POSITION + "</Y_DECIMAL_POSITION>";

    var colorRanges = "";
    $.each(kpi.COLOR_RANGES, function (key, value) {
        colorRanges += "<COLOR_RANGE FROM='" + this.FROM_VALUE + "' TO='" + this.TO_VALUE + "' COLOR_CODE='" + this.COLOR_CODE + "'></COLOR_RANGE>";
    });
    definition += "<COLOR_RANGES>" + colorRanges + "</COLOR_RANGES>";

    definition += "<SCALE_TYPE>" + kpi.SCALE_TYPE + "</SCALE_TYPE>";
    definition += "<SCALE_MODE>" + kpi.SCALE_MODE + "</SCALE_MODE>";
    //Abdulmajeed Edit End ... extra configurations for KPI...


    //added by abdulmajeed save drilldown settings in the xml.
    var drilldowns = "";
    $(kpi.drilldowns).each(function () {
        drilldowns += "<DRILL_DOWN>";
        drilldowns += "<SOURCE_COLUMN>" + this.SOURCE_COLUMN + "</SOURCE_COLUMN>";
        drilldowns += "<TARGET_BO>" + this.TARGET_BO + "</TARGET_BO>";
        drilldowns += "<TARGET_QUERY>" + this.TARGET_QUERY + "</TARGET_QUERY>";

        var mappings = "";
        $(this.mappings).each(function () {
            mappings += "<MAPPING>"
            mappings += "<TECHNAME>" + this.TECHNAME + "</TECHNAME>";
            mappings += "<NAME>" + this.NAME + "</NAME>";
            mappings += "<IOBJNM>" + this.IOBJNM + "</IOBJNM>";
            mappings += "<MAPPED_VALUE>" + this.MAPPED_VALUE + "</MAPPED_VALUE>";
            mappings += "<VALUE>" + this.VALUE + "</VALUE>";
            mappings += "<AXIS>" + this.AXIS + "</AXIS>";
            mappings += "</MAPPING>"
        });
        drilldowns += "<MAPPINGS>" + mappings + "</MAPPINGS> </DRILL_DOWN>";
    });

    definition += "<DRILL_DOWNS>" + drilldowns + "</DRILL_DOWNS>";
    //end abdulmajeed edit.

    definition += "</REP_DEFINITION>";
    report['REP_DEFINITION'] = BOI.BOIData.util.htmlEncode(definition);

    for (var i in report) {
        if (i) {
            param = new BOIData.Parameter();
            param.name = i;
            param.values = report[i] == null ? [""] : [report[i]];
            record.parameters.push(param);
        }
    }
    req = BOI.BOIData.request.prepare(class_name, method_name, [record]);
    BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
    });
}

//initialization and rendering of kpi details
function load() {
    if (app_id == undefined || report_id == undefined || report_type != "KPI")
        return;

    //hide the form and show loading image
    $('form').hide();
    $('body').append(BOIData.render.loading(window.location.href));

    //load kpi details
    BOIData.read.getNode(app_id, report_id, function (data) {
        data = $(data);

        //set values
        var form = $('form').first();
        data.find('NODE_INFO').children().each(function () {
            var tag = $(this).get(0).tagName;
            form.find('#' + tag).val($(this).text());

            report[tag] = $(this).text();
        });

        //get details from query
        //get data
        var queryArguments = new Object();
        //TO BE REMOVED ONCE QUERY HEADER IS FIXED...
        queryArguments['display_key'] = 'X';

        BOI.executeReport(undefined, data_provider, function (data) {

            headerColumnsOptions = '';
            var drill_frm = $('[name="drill_details"]');

            //populate dropdowns
            $(data).find('ZBW_QUERY_OUTPUT_METADATA').each(function () {
                var techname;
                var elem = $($(this).find('ELEM')[0]).text();
                var fieldname = $($(this).find('FIELDNAME')[0]).text();
                if (elem == null || elem == "")
                    techname = fieldname;
                else
                    techname = elem;
                var caption = $($(this).find('SCRTEXT_L')[0]).text();
                headerColumnsOptions += "<option value='" + techname + "'>" + techname + ": " + caption + "</option>";
            });

            $('#X_AXIS, #Y_AXES, #SERIES_AXIS').html(headerColumnsOptions);
            $('#SERIES_AXIS').append('<option value="">SINGLE (NO SERIES DEFINITION)</option>')

            //set kpi values
            var definition = report['REP_DEFINITION'];

            //definition = parent.BOIData.util.htmlDecode(definition);
            definition = $(definition);

            kpi.X_AXIS = definition.find('X_AXIS').text();
            kpi.SERIES_AXIS = definition.find('SERIES_AXIS').text();
            kpi.PLOT_TYPE = definition.find('PLOT_TYPE').text();
            kpi.CHART_TYPE = definition.find('CHART_TYPE').text();
            kpi.MAXIMUM = definition.find('MAXIMUM').text();
            var y_axes = [];
            definition.find('Y_AXES Y_AXIS').each(function () {
                kpi.Y_AXES[$(this).text()] = $(this).text();
                y_axes.push($(this).text());
            });

            $('#X_AXIS').val(kpi.X_AXIS);
            $('#Y_AXES').val(y_axes);
            $('#SERIES_AXIS').val(kpi.SERIES_AXIS);
            $('#PLOT_TYPE').val(kpi.PLOT_TYPE);
            $('#CHART_TYPE').val(kpi.CHART_TYPE);
            $('#MAXIMUM').val(kpi.MAXIMUM);

            //Abdulmajeed Edit Start ... extra configurations for KPI...
            kpi.LABEL_POSITION = definition.find('LABEL_POSITION').text();
            kpi.X_AXIS_LABEL = definition.find('X_AXIS_LABEL').text();
            kpi.Y_AXIS_LABEL = definition.find('Y_AXIS_LABEL').text();
            kpi.X_DECIMAL_POSITION = definition.find('X_DECIMAL_POSITION').text();
            kpi.Y_DECIMAL_POSITION = definition.find('Y_DECIMAL_POSITION').text();

            if (definition.find('COLOR_RANGES')) {
                var colorRangesXML = definition.find('COLOR_RANGE');
                kpi.COLOR_RANGES = new Array();
                colorRangesXML.each(function (key, value) {
                    kpi.COLOR_RANGES[key] = new Object();
                    kpi.COLOR_RANGES[key].FROM_VALUE = $(this).attr('FROM');
                    kpi.COLOR_RANGES[key].TO_VALUE = $(this).attr('TO');
                    kpi.COLOR_RANGES[key].COLOR_CODE = $(this).attr('COLOR_CODE');

                });
            }

            kpi.SCALE_TYPE = definition.find('SCALE_TYPE').text();
            kpi.SCALE_MODE = definition.find('SCALE_MODE').text();

            $('#LABEL_POSITION').val(kpi.LABEL_POSITION);
            $('#X_AXIS_LABEL').val(kpi.X_AXIS_LABEL);
            $('#Y_AXIS_LABEL').val(kpi.Y_AXIS_LABEL);
            $('#X_DECIMAL_POSITION').val(kpi.X_DECIMAL_POSITION);
            $('#Y_DECIMAL_POSITION').val(kpi.Y_DECIMAL_POSITION);

            if (kpi.COLOR_RANGES && kpi.COLOR_RANGES.length > 0) {
                if (kpi.COLOR_RANGES[0] != null) {
                    $('#FIRST_RANGE_FROM').val(kpi.COLOR_RANGES[0].FROM_VALUE);
                    $('#FIRST_RANGE_TO').val(kpi.COLOR_RANGES[0].TO_VALUE);
                    $('#FIRST_RANGE_COLOR').val(kpi.COLOR_RANGES[0].COLOR_CODE);
                }

                if (kpi.COLOR_RANGES[1] != null) {
                    $('#SECOND_RANGE_FROM').val(kpi.COLOR_RANGES[1].FROM_VALUE);
                    $('#SECOND_RANGE_TO').val(kpi.COLOR_RANGES[1].TO_VALUE);
                    $('#SECOND_RANGE_COLOR').val(kpi.COLOR_RANGES[1].COLOR_CODE);
                }

                if (kpi.COLOR_RANGES[2] != null) {
                    $('#THIRD_RANGE_FROM').val(kpi.COLOR_RANGES[2].FROM_VALUE);
                    $('#THIRD_RANGE_TO').val(kpi.COLOR_RANGES[2].TO_VALUE);
                    $('#THIRD_RANGE_COLOR').val(kpi.COLOR_RANGES[2].COLOR_CODE);
                }
            }
            $('#SCALE_TYPE').val(kpi.SCALE_TYPE);
            $('#SCALE_MODE').val(kpi.SCALE_MODE);
            //Abdulmajeed Edit End ... extra configurations for KPI...

            //show form
            $('body').find('.bi_loading').remove();
            $('form').fadeIn();

            //added by abdulmajeed, append drill down page after loding data
            //and parse drilldown xml.

            // otaism2a : 9/2/2014 added to reduce the line of code for kpi loading
            kpi.DRILL_DOWNS = new Array();
            kpi.DRILL_DOWNS = BOI.loadKpiDrillDown(definition, kpi);

            $('[name="drill_details"]').attr('src', 'bi_admin_drill_down_det.htm');
            $('[name="drill_details"]').load(function () {
                //window.frames['drill_details'].refreshGrids();
                window.frames['drill_details'].refresh();
            });
            //end abdulmajeed edit.
        }, queryArguments);
    });
}
</script>

<style type="text/css">
    body, html {
        overflow: auto;
        background: none;
    }

</style>
</head>
<body>
<div class="tab-frame bi_admin_report_edit" id="accordion">

    <div class="kpi-form-container">
        <form method="post" METH_NAME="UPDATE" id="kpi-edit-form" style="display: none;">
            <h2>KPI Definition</h2>
            <ul>
                <li>
                <label for="X_AXIS">X Axis:</label>
                <select id="X_AXIS" name="X_AXIS"></select></li>
                <li>
                <label for="Y_AXES">Y Axes:</label>
                   <select multiple="multiple" size="5" id="Y_AXES" name="Y_AXES"></select>
                   </li>
                <li>
                <label for="SERIES_AXIS">Series Axis:</label>
                <select id="SERIES_AXIS" name="SERIES_AXIS"></select>
                </li>
                <li>
                <label for="MAXIMUM">Maximum:</label>
                <input id="MAXIMUM" name="MAXIMUM" type="text"/></li>
                <!-- Abdulmajeed edit start -->
                <li>
                <label for="LABEL_POSITION">Label Position:</label>
                <select id="LABEL_POSITION" name="LABEL_POSITION" type="text">
                    <option>Inside</option>
                    <option>Outside</option>
                </select>
                </li>
                <li>
                <label for="X_AXIS_LABEL">X-Axis Label:</label>
                <input id="X_AXIS_LABEL" name="X_AXIS_LABEL" type="text"/>
                </li>
                <li>
                <label for="Y_AXIS_LABEL">Y-Axis Label:</label>
                <input id="Y_AXIS_LABEL" name="Y_AXIS_LABEL" type="text"/>
                </li>
                <li>
                <label for="X_DECIMAL_POSITION">X-Axis Decimal Position:</label>
                    <input id="X_DECIMAL_POSITION"  name="X_DECIMAL_POSITION" type="text"/>
                </li>
                <li>
                <label for="Y_DECIMAL_POSITION">Y-Axis Decimal Position:</label>
                    <input id="Y_DECIMAL_POSITION" name="Y_DECIMAL_POSITION" type="text"/>
                    </li>
                <li>
                    <label for="FIRST_RANGE_FROM">From:</label>
                    <input id="FIRST_RANGE_FROM" class="unit" name="FIRST_RANGE_FROM" type="text"/>
                    <label for="FIRST_RANGE_TO" class="x-small">To:</label>
                    <input id="FIRST_RANGE_TO" class="unit" name="FIRST_RANGE_TO" type="text"/>
                    <label for="SECOND_RANGE_TO"  class="small">Color:</label>
                    <input id="FIRST_RANGE_COLOR" class="unit" name="FIRST_RANGE_COLOR" type="text"/>
                </li>

                <li>
                    <label for="SECOND_RANGE_FROM">From:</label>
                    <input id="SECOND_RANGE_FROM" class="unit" name="SECOND_RANGE_FROM" type="text"/>
                    <label for="SECOND_RANGE_TO" class="x-small">To:</label>
                    <input id="SECOND_RANGE_TO" class="unit" name="SECOND_RANGE_TO" type="text"/>
                    <label for="SECOND_RANGE_TO" class="small">Color:</label>
                    <input id="SECOND_RANGE_COLOR" class="unit" name="SECOND_RANGE_COLOR" type="text"/>
                </li>

                <li>
                    <label for="THIRD_RANGE_FROM">From:</label>
                    <input id="THIRD_RANGE_FROM" class="unit" name="THIRD_RANGE_FROM" type="text"/>
                    <label for="THIRD_RANGE_TO" class="x-small">To:</label>
                    <input id="THIRD_RANGE_TO" class="unit" name="THIRD_RANGE_TO" type="text"/>
                    <label for="SECOND_RANGE_TO" class="small">Color:</label>
                    <input id="THIRD_RANGE_COLOR" class="unit" name="THIRD_RANGE_COLOR" type="text"/>
                </li>

                <!-- Abdulmajeed edit end -->

                <li><label for="PLOT_TYPE">Plot Type:</label>
                    <select id="PLOT_TYPE" name="PLOT_TYPE">
                        <option>CategorizedVertical</option>
                        <option>CategorizedHorizontal</option>
                        <option>CategorizedBySeriesVertical</option>
                        <option>CategorizedBySeriesHorizontal</option>
                        <option>Scatter</option>
                        <option>Pie</option>
                        <option>Polar</option>
                        <option>Radar</option>
                        <option>Doughnut</option>
                        <option>Map</option>
                        <option>HeatMap</option>
                        <option>TreeMap</option>
                        <option>Funnel</option>
                        <option>Gauge</option>
                    </select></li>
                <li>
                <label for="CHART_TYPE">Chart Type:</label>
                    <select id="CHART_TYPE" name="CHART_TYPE">
                        <option>Bar</option>
                        <option>RangeBar</option>
                        <option>Line</option>
                        <option>RangeArea</option>
                        <option>RangeSplineArea</option>
                        <option>Spline</option>
                        <option>Marker</option>
                        <option>Area</option>
                        <option>SplineArea</option>
                        <option>StepLineForward</option>
                        <option>StepLineBackward</option>
                        <option>StepLineForwardArea</option>
                        <option>StepLineBackwardArea</option>
                        <option>Bubble</option>
                        <option>Candlestick</option>
                        <option>OHLC</option>
                        <option>Gauge</option>
                    </select></li>

                <!-- Abdulmajeed edit start -->
                <li>
                <label for="SCALE_TYPE">Y-Axis Scale Type:</label>
                    <select id="SCALE_TYPE" name="SCALE_TYPE">
                        <option>Linear</option>
                        <option>Logarithmic</option>
                        <option>DateTime</option>
                    </select>
                </li>
                <li>
                <label for="SCALE_MODE">Y-Axis Scale Mode:</label>
                    <select id="SCALE_MODE" name="SCALE_MODE">
                    <option>Normal</option>
                    <option>Stacked</option>
                    <option>PercentStacked</option>
                    <option>Overlay</option>
                    <option>SortedOverlay</option>
                </select></li>
                <!-- Abdulmajeed edit end -->

                <li>
                <label for="submit"></label>
                    <input id="submit" type="submit" value="Save"/>
                    <input type="button"
                           id="preview"
                           value="Preview"/><input
                            id="reset" type="button" value="Cancel"/></li>
            </ul>


        </form>
    </div>

    <div class="kpi-preview">
        <h2>KPI Preview</h2>
        <iframe name="chart_preview" style="width: 100%; height: 100%;"  src="../comp/selection/bi_apps_comp_kpi_line.html"></iframe>
    </div>

    <div class="kpi-drill">
        <h2>Drilldown Details</h2>
        <iframe name="drill_details" style="width: 100%; height:400px"></iframe>
    </div>

</div>
</body>
</html>